<template>
    <div style="position: fixed; top: 100px; left: 100px; z-index: 100">
        <button @click="start1">开始</button>
        <button @click="stop1">结束</button>
        <button @click="serialize">导出</button>
    </div>
    <canvas id="litegraphDom"></canvas>
</template>

<script>
import { toRaw } from "vue";
import { CpcLitegraph } from "../../../../utils/litegraph";

let cpcLitegraph;
export default {
    props: ["datas", "callBack", "close"],
    data() {
        return {
            config: {
              "last_node_id": 6,
              "last_link_id": 10,
              "nodes": [
                {
                  "id": 1,
                  "type": "nodejs/Router",
                  "pos": {
                    "0": 100,
                    "1": 200,
                    "2": 0,
                    "3": 0,
                    "4": 0,
                    "5": 0,
                    "6": 0,
                    "7": 0,
                    "8": 0,
                    "9": 0
                  },
                  "size": [
                    140,
                    60
                  ],
                  "flags": {},
                  "order": 0,
                  "mode": 0,
                  "inputs": [],
                  "outputs": [
                    {
                      "name": "next",
                      "type": "ArrowFlow",
                      "label": "next",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0",
                      "links": [
                        1
                      ]
                    },
                    {
                      "name": "ctx",
                      "type": "Object",
                      "label": "ctx",
                      "shape": 1,
                      "color_off": "#1448ad",
                      "links": [
                        2
                      ],
                      "_data": {
                        "name": "name",
                        "value": {
                          "id": 1
                        },
                        "status": true,
                        "type": 1,
                        "list": [
                          1
                        ]
                      }
                    }
                  ],
                  "title": "路由实例",
                  "properties": {
                    "preDatas": [
                      {
                        "name": "name",
                        "value": {
                          "id": 1
                        },
                        "status": true,
                        "type": 1,
                        "list": [
                          1
                        ]
                      }
                    ]
                  },
                  "cpcRunCode": "\n    return preDatas;\n  "
                },
                {
                  "id": 2,
                  "type": "basic/ObjectTo",
                  "pos": {
                    "0": 300,
                    "1": 200,
                    "2": 0,
                    "3": 0,
                    "4": 0,
                    "5": 0,
                    "6": 0,
                    "7": 0,
                    "8": 0,
                    "9": 0
                  },
                  "size": {
                    "0": 210,
                    "1": 158
                  },
                  "flags": {},
                  "order": 2,
                  "mode": 0,
                  "inputs": [
                    {
                      "name": "pre",
                      "type": "ArrowFlow",
                      "label": "pre",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0",
                      "link": 1
                    },
                    {
                      "name": "inputSource",
                      "type": "Object",
                      "label": "输入的对象",
                      "shape": 1,
                      "color_off": "#1448ad",
                      "link": 2
                    }
                  ],
                  "outputs": [
                    {
                      "name": "next",
                      "type": "ArrowFlow",
                      "label": "next",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0",
                      "links": [
                        4
                      ]
                    },
                    {
                      "name": "name",
                      "type": "String",
                      "links": [
                        9
                      ],
                      "label": "name",
                      "shape": 3,
                      "color_off": "#aaa",
                      "_data": "name"
                    },
                    {
                      "name": "value",
                      "type": "Object",
                      "links": null,
                      "label": "value",
                      "shape": 1,
                      "color_off": "#1448ad",
                      "_data": {
                        "id": 1
                      }
                    },
                    {
                      "name": "status",
                      "type": "Boolean",
                      "links": null,
                      "label": "status",
                      "shape": 3,
                      "color_off": "#ab0909",
                      "_data": true
                    },
                    {
                      "name": "type",
                      "type": "Number",
                      "links": null,
                      "label": "type",
                      "shape": 3,
                      "color_off": "#34ad19",
                      "_data": 1
                    },
                    {
                      "name": "list",
                      "type": "Array",
                      "links": null,
                      "label": "list",
                      "shape": 1,
                      "color_off": "#9a3434",
                      "_data": [
                        1
                      ]
                    }
                  ],
                  "title": "拆分对象",
                  "properties": {},
                  "cpcRunCode": "\n    const data = preDatas[0];\n    if (!data) {\n      return [];\n    }\n    return outputInfos.map((item) => {\n      return data[item.name];\n    });\n  "
                },
                {
                  "id": 3,
                  "type": "nodejs/Response",
                  "pos": {
                    "0": 917,
                    "1": 246,
                    "2": 0,
                    "3": 0,
                    "4": 0,
                    "5": 0,
                    "6": 0,
                    "7": 0,
                    "8": 0,
                    "9": 0
                  },
                  "size": [
                    140,
                    60
                  ],
                  "flags": {},
                  "order": 5,
                  "mode": 0,
                  "inputs": [
                    {
                      "name": "pre",
                      "type": "ArrowFlow",
                      "label": "pre",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0",
                      "link": 5
                    },
                    {
                      "name": "result",
                      "type": 0,
                      "label": "返回结果",
                      "shape": 1,
                      "color_off": "#aaa",
                      "link": 6
                    }
                  ],
                  "outputs": [],
                  "title": "路由响应",
                  "properties": {},
                  "cpcRunCode": "\n    console.log(\"\\u8DEF\\u7531\\u54CD\\u5E94\\u6253\\u5370\\u8F93\\u51FA\", preDatas[0]);\n    return preDatas;\n  "
                },
                {
                  "id": 4,
                  "type": "basic/ToObject",
                  "pos": {
                    "0": 625,
                    "1": 262,
                    "2": 0,
                    "3": 0,
                    "4": 0,
                    "5": 0,
                    "6": 0,
                    "7": 0,
                    "8": 0,
                    "9": 0
                  },
                  "size": {
                    "0": 210,
                    "1": 98
                  },
                  "flags": {},
                  "order": 4,
                  "mode": 0,
                  "inputs": [
                    {
                      "name": "pre",
                      "type": "ArrowFlow",
                      "label": "pre",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0",
                      "link": 4
                    },
                    {
                      "name": "name",
                      "type": "String",
                      "link": 9,
                      "label": "name",
                      "shape": 3,
                      "color_off": "#aaa"
                    },
                    {
                      "name": "data",
                      "type": "Object",
                      "link": 10,
                      "label": "data",
                      "shape": 1,
                      "color_off": "#1448ad"
                    }
                  ],
                  "outputs": [
                    {
                      "name": "next",
                      "type": "ArrowFlow",
                      "label": "next",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0",
                      "links": [
                        5
                      ]
                    },
                    {
                      "name": "outSource",
                      "type": "Object",
                      "label": "输入的对象",
                      "shape": 1,
                      "color_off": "#1448ad",
                      "links": [
                        6
                      ],
                      "_data": {
                        "name": "name"
                      }
                    }
                  ],
                  "title": "转为对象",
                  "properties": {},
                  "cpcRunCode": "\n    const result = {};\n    inputInfos.forEach((item, index) => {\n      result[item.name] = preDatas[index];\n    });\n    return [result];\n  "
                },
                {
                  "id": 6,
                  "type": "basic/ToObject",
                  "pos": {
                    "0": 310,
                    "1": 443,
                    "2": 0,
                    "3": 0,
                    "4": 0,
                    "5": 0,
                    "6": 0,
                    "7": 0,
                    "8": 0,
                    "9": 0
                  },
                  "size": {
                    "0": 210,
                    "1": 78
                  },
                  "flags": {},
                  "order": 3,
                  "mode": 0,
                  "inputs": [
                    {
                      "name": "pre",
                      "type": "ArrowFlow",
                      "label": "pre",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0"
                    },
                    {
                      "name": "a",
                      "type": "String",
                      "link": 8,
                      "label": "a",
                      "shape": 3,
                      "color_off": "#aaa"
                    }
                  ],
                  "outputs": [
                    {
                      "name": "next",
                      "type": "ArrowFlow",
                      "label": "next",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0"
                    },
                    {
                      "name": "outSource",
                      "type": "Object",
                      "label": "输入的对象",
                      "shape": 1,
                      "color_off": "#1448ad",
                      "links": [
                        10
                      ]
                    }
                  ],
                  "title": "转为对象",
                  "properties": {},
                  "cpcRunCode": "\n    const result = {};\n    inputInfos.forEach((item, index) => {\n      result[item.name] = preDatas[index];\n    });\n    return [result];\n  "
                },
                {
                  "id": 5,
                  "type": "basic/CpcString",
                  "pos": {
                    "0": 28,
                    "1": 462,
                    "2": 0,
                    "3": 0,
                    "4": 0,
                    "5": 0,
                    "6": 0,
                    "7": 0,
                    "8": 0,
                    "9": 0
                  },
                  "size": {
                    "0": 210,
                    "1": 78
                  },
                  "flags": {},
                  "order": 1,
                  "mode": 0,
                  "inputs": [
                    {
                      "name": "pre",
                      "type": "ArrowFlow",
                      "label": "pre",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0"
                    }
                  ],
                  "outputs": [
                    {
                      "name": "next",
                      "type": "ArrowFlow",
                      "label": "next",
                      "shape": 5,
                      "color_off": "#666",
                      "color_on": "#ff0"
                    },
                    {
                      "name": "输出的数据",
                      "type": 0,
                      "label": "输出的数据",
                      "shape": 1,
                      "color_off": "#aaa",
                      "links": [
                        8
                      ],
                      "_data": "s水电费"
                    }
                  ],
                  "title": "创建字符串",
                  "properties": {
                    "preDatas": [
                      "s水电费"
                    ]
                  },
                  "cpcRunCode": "\n    return preDatas;\n  "
                }
              ],
              "links": [
                [
                  1,
                  1,
                  0,
                  2,
                  0,
                  "ArrowFlow"
                ],
                [
                  2,
                  1,
                  1,
                  2,
                  1,
                  "Object"
                ],
                [
                  4,
                  2,
                  0,
                  4,
                  0,
                  "ArrowFlow"
                ],
                [
                  5,
                  4,
                  0,
                  3,
                  0,
                  "ArrowFlow"
                ],
                [
                  6,
                  4,
                  1,
                  3,
                  1,
                  0
                ],
                [
                  8,
                  5,
                  1,
                  6,
                  1,
                  "String"
                ],
                [
                  9,
                  2,
                  1,
                  4,
                  1,
                  "String"
                ],
                [
                  10,
                  6,
                  1,
                  4,
                  2,
                  "Object"
                ]
              ],
              "groups": [],
              "config": {},
              "extra": {},
              "version": 0.4
            },
            mock: { name: "name", value: { id: 1 }, status: true, type: 1, list: [1] },
        };
    },
    computed: {},
    mounted() {
        cpcLitegraph = new CpcLitegraph("litegraphDom", toRaw(this.config), toRaw(this.mock));
    },
    unmounted() {
        cpcLitegraph.destroy();
        cpcLitegraph = null;
    },
    methods: {
        start1() {
            cpcLitegraph.graph.start();
        },
        stop1() {
            cpcLitegraph.graph.stop();
        },
        serialize() {
            console.log(cpcLitegraph.graph.serialize());
        },
    },
};
</script>

<style lang="scss">
#litegraphDom {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
}
#node-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: none;
}
</style>
